<template>
<view>
<!-- <u-gap :height="statusBarHeight" style="background-color:red;"></u-gap> -->
	<view style="background-color: white;width: 100%;">
		<view :style="{height:statusBarHeight+'px'}" class="cflex-c" style="width: 100%;"></view>
		<view class="cflex-r u-p-b-25" style="align-items: center;justify-content: flex-start;
		padding:20rpx 20rpx">
			<image class="u-m-l-30 u-m-r-5" src="../../static/qieTu/arrow-left.png" mode="widthFix"
			style="width:40rpx;" @tap="goBack()"></image>
			<u-search style="width:600rpx;"  placeholder="请输入社工姓名" v-model="keyword"
			:action-style="actionStyle" @search="searchJishi()"
			@custom='searchJishi()' @change="searchChange(keyword)"></u-search>
		</view>
	</view>
	<view style="background-color: #F9F9F9;" v-for="(item,jIndex) in jishiList" :key="jIndex" @tap="goDetail(item)">
		<view class="u-m-20 u-p-5 cbg-white cflex-r" style="border-radius: 5% 5% 5% 5%;"
		>
			<view class="cflex-c u-p-t-10 u-p-r-15" style="align-items: center;width: 180rpx;margin-top: 25rpx;">
				<image  mode="aspectFill" :src="item.avatar" style="width: 100rpx;height: 100rpx;border-radius:50%;"></image>
				<view class="cflex-c u-m-l-10"
					style="text-align: center;background-color: #4578F7;border-radius:25rpx;padding: 5rpx 20rpx; margin-top: 20rpx;justify-content: center;align-items: center;"
					:style="{backgroundColor:item.status===0?'#aaaaaa':'#4578F7'}"
					>
					<text style="color: #FFFFFF; font-size: 23rpx;">{{item.status===0?'已休息':'可服务'}}</text>
				</view>
			</view>
			<view class="u-p-t-20 cflex-c" style="width: 570rpx;">
				<view class="cflex-r" style="justify-content: space-between;align-items: center;">
					<view>
						<text style="font-weight: bold; font-size: 30rpx;">{{item.name}}</text>
					</view>
					<view class="cflex-c u-p-l-15 u-p-r-15 u-p-t-10 u-p-b-10 u-m-r-10 flex"
						style="background-color: #FFF0C4;border-radius: 14rpx;color: #FF7D0B;text-align: center;align-items: center;">
						<text style="font-weight: bold;font-size: 20rpx;">最早可约：{{item.params.zuiZao}}</text>
					</view>
				</view>
				<view class="cflex-r">
					<view  style="padding: 3rpx;">
						<image :src="'../../static/star/smallStar'+item.score+'.png'" 
						mode="widthFix" style="width: 125rpx;height:0rpx"
							use-slot="false"></image>
					</view>
					<view class="u-m-l-10">{{item.score}}.0</view>
				</view>
				<view class="cflex-r u-p-t-10" style="width:550rpx;">
					<text class="u-line-2" style="color: #666666;">{{item.des}}</text>
				</view>
				<view class="u-p-t-20 u-p-r-10" >
					<view>
						<u-divider color="#fa3534" half-width="810" border-color="#D4D4D4" :use-slot="false">
						</u-divider>
					</view>
				</view>
				<view class="cflex-r u-p-5" style="justify-content: space-between;align-items: center;">
					<text style="font-size: 28rpx;">已服务:{{item.num}}单</text>
					<view class="u-p-10 cflex-r" style="align-items: center;justify-content: center;">
						<view class="u-p-r-10 u-p-t-10">
							<image src="../../static/qieTu/daohang.png" style="width: 24rpx;height: 24rpx;"></image>
						</view>
						<view>
							<text style="font-weight: bold; font-size: 24rpx;">距离: {{item.params.juLi}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				actionStyle:{color:'rgb(120,120,120)'},//搜索两个字的样式
				keyword:"",//搜索的内容
				jishiList:[],
				iid:"",
				timer:0,//计时器
			};
		},
		methods: {
			goBack(){//返回按钮
				uni.navigateBack({
					delta:1,
				})
			},
			searchJishi(){
				let params={name:this.keyword}
				if(this.iid!==''){
					params.iid=this.iid;
				}
				if(this.keyword===""){
					uni.showToast({
						title:'搜索关键字不能为空',icon:'none'
					})
					return 
				}
				 //console.log("keyword",this.keyword)
				this.$request("kehu/jishi/jiShiList",params).then(res=>{
					if(res.data.length===0){
						uni.showToast({
							title:"未查找到相关记录",icon:"none"
						})
					}else{
						this.jishiList=res.data;
						// this.jishiList.push(...res.data,...res.data);
					}
					
				})
			},
			searchChange(val){
				clearTimeout(this.timer)
				this.timer=setTimeout(()=>{
					if(val===""){
						this.jishiList=[];
					}
				},1000)
			},
			goDetail(item) {
				 //console.log("go");
				let isLogin = this.$store.state.isLogin;
				if(isLogin == false){
					this.loginUtil.goLogin(this);
				}else{
					 //console.log(this.iid,item.id,item.params.zuiZao)
					if(this.iid!==""){//从项目-选择计师路线
						let option=JSON.stringify({goodsid:this.iid,jishiId:item.id,zuiZao:item.params.zuiZao});
						uni.navigateTo({
							url: '../order/order_submit?option='+option
						})
					}else{//tab2路线
						uni.navigateTo({
							url:"jishi_info?id="+item.id,
						})
					}
					
				}
			},
		},
		onLoad(option) {
			 //console.log(option)
			if(option.iid){
				this.iid=option.iid;
			}
		},
		onShow(){

		},
		computed:{
			statusBarHeight(){
				return this.$store.state.sysInfo.statusBarHeight;
			},
		}
	};
</script>
<style>
</style>
